import Taro, {Component} from '@tarojs/taro'
import {connect} from '@tarojs/redux'
import {View, ScrollView, Text, Image} from '@tarojs/components'
import './index.less'
import {AtIcon, AtAvatar, AtInput} from 'taro-ui'
var timer_set

@connect(({businessHome, businessDetail, businessList, loading}) => ({
  businessHome,
  businessDetail,
  businessList,
  loading
}))

export default class HomeList extends Component {

  config = {
    navigationBarTitleText: ''
  }

  constructor(props) {
    super(props)
    this.state = {
      current: 0
    }
  }

  componentWillMount() {
  }

  componentDidMount() {
    const {dispatch} = this.props;
    dispatch({type: 'businessHome/initData'})
    // 获取列表数据
    dispatch({type: 'businessHome/loadProductData'})
    dispatch({type: 'businessHome/loadDeviceData'})
    dispatch({type: 'businessHome/loadOrderData'})
  }

  choseListData(item, child) {
    const {dispatch} = this.props;
    dispatch({ type: 'businessDetail/initData' })
    dispatch({
      type: 'businessDetail/updateState',
      payload: {
        loadUrl: child.urlData,
        id: item.id
      }
    })
    Taro.navigateTo({
      url: `/pages/businessDetail/index`
    })
  }

  loadMore(item) {
    const {dispatch} = this.props;
    dispatch({ type: 'businessList/initData' })
    dispatch({
      type: 'businessList/updateState',
      payload: {
        urlData: item.urlData,
        navName: item.name,
        loadUrl: item.url
      }
    })
    Taro.navigateTo({
      url: `/pages/businessList/index`
    })
  }

  componentWillUnmount() {
  }

  componentDidShow() {
  }

  componentDidHide() {
  }

  // 下拉滚动
  onScrollToLower(e) {}

  getData(e) {
    const t = this;
    const { dispatch } = t.props;
    dispatch({
      type : 'businessHome/updateState',
      payload : {
        name: e
      }
    })
    if(timer_set){
      clearTimeout(timer_set)
    }
    timer_set = setTimeout( () => {
      dispatch({
        type : 'businessHome/updateState',
        payload : {
          page: 0,
          listData: [], // 列表
        }
      })
      dispatch({
        type : 'businessHome/getList',
        payload : {
          name: e,
          page: 0,
        }
      })
    }, 500)
  }

  render() {
    const {
      businessHome, dispatch
    } = this.props;
    const {
      name, dataList
    } = businessHome;
    const updateState = (obj) => {
      dispatch({
        type: 'businessHome/updateState',
        payload: {
          ...obj
        }
      })
    }

    const handleClick = (value) => {
      if (value === 1) {
        Taro.navigateTo({
          url: `/pages/myOrder/index`
        })
      }
    }
    const bannerList = [
      'https://factory.wenyangchou.com/myfiles/system/factory1.jpg',
      'https://factory.wenyangchou.com/myfiles/system/factory2.jpg',
      'https://factory.wenyangchou.com/myfiles/system/factory3.jpg'
    ]
    return (

      <View className='homeList'>
        <View className='choseList'>
          <View className='iconText'>
            <AtIcon value='map-pin' color='#fff' size='25'></AtIcon>
            <View>全部</View>
          </View>
					<View className='search'>
            <AtInput
              name='value'
              type='text'
              placeholder='请输入产品名称、型号'
              value={name}
              onChange={this.getData.bind(this)}
              border={false}
            />
					</View>
          {/* <View className='iconText'>
            <Image src={`../../images/qrcode.png`} mode="widthFix"
            />
            <View>扫一扫</View>
          </View> */}
				</View>
        <View className='topBox'>
          {
            bannerList && bannerList[0] ?
              <Swiper
                interval={10000}
                className="swiper-container"
                circular
                indicatorDots
                autoplay
                indicatorColor='#FAFAFA'
                indicatorActiveColor='#026179'
              >
                {
                  bannerList.map((item, index) => (
                    <SwiperItem key={index}>
                      {/* <image src={`${DOWNLOAD + item}`}  className="swiper-img" /> */}
                      <image src={item} className="swiper-img"/>
                    </SwiperItem>
                  ))
                }
              </Swiper>
              :
              <Image className="swiper-img bannerDef" mode="widthFix" src="../../images/banner.png"></Image>
          }
        </View>
        {/* <View className="tabBox">
          {tabList.map(item => <View key={item.name} className="tabChild">
            <AtAvatar circle size={16} image='https://jdc.jd.com/img/200'></AtAvatar>
            <View>{item.name}</View>
          </View>)}
        </View> */}
        {/*<Image className="msgImg" */}
        {/*  mode="widthFix" src="https://factory.wenyangchou.com/myfiles/system/factory1.jpg"></Image>*/}
        <View className='companyList'>
            <ScrollView
                scrollY
                onScrollToLower={this.onScrollToLower.bind(this)}
                style="height:100%"
            >
              {
                  dataList.map((item, i) => {
                    return <View
                      className={'listChild'}
                      key={i}
                    >
                      <View className='productTitle'>
                        <View className='productName'>{item.name}</View>
                        <View className='productMore'
                          onClick={this.loadMore.bind(this, item)}
                        >更多 {'>'} </View>
                      </View>
                      {
                        businessHome[item.data].map((child, index) => <View
                          key={index}
                          className={`${index==1||index==4?'productBoxMid':'productBox'}`}
                          onClick={this.choseListData.bind(this, child, item)}
                        >
                          <View className='productImg'>
                              <image src={child.topImage} />
                          </View>
                          <View className='productText'>
                            {/* <Text className='selfEmployed'>自营</Text> */}
                            {child.title}
                          </View>
                          {/* <View className='productprice'>
                            <Text>￥99</Text>
                            <Text className='smallNum'>.00</Text>
                          </View> */}
                        </View>)
                      }
                  </View>
                  })
              }
            </ScrollView>
        </View>

      </View>
    )
  }
}
